<template>
    <div class="block">
        <div style="color:#fff;">
            <h2>趣游后台管理系统</h2>
        </div>
        <div class="blockMin">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="account" style="margin-bottom: 25px;">
                    <el-input type="text" placeholder="请输入账号" v-model="ruleForm.account" autocomplete="off"
                        prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="pass" style="margin-bottom: 30px;">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.pass" autocomplete="off"
                        prefix-icon="el-icon-lock" show-password></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px;">
                    <el-button type="primary" style="width:100%;height: 40px;" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>

import axios from "axios";
axios.defaults.withCredentials = true;

export default {
    name: "Login",
    data() {
        var validateAccount = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                account: "", // 账号
                pass: "", // 密码
            },
            rules: {
                account: [{ validator: validateAccount, trigger: "blur" }],
                pass: [{ validator: validatePass, trigger: "blur" }]
            },
        };
    },
    methods: {
        async submitForm(formName) {
            try {
                // 对当前表单进行校验，确保表单数据的正确性。
                await this.$refs[formName].validate();
                // 后台对验证码、账号、密码进行验证
                const res = await this.$axios.post("/admlogin", {
                    aid: `${this.ruleForm.account}`,
                    password: `${this.ruleForm.pass}`,
                });
                console.log(res.data);
                if (res.data == "登录成功") {
                    this.$message.success("登录成功");
                    localStorage.setItem('aid', this.ruleForm.account);
                    const baseUrl = window.location.href.split('#')[0];
                    window.location.href = `${baseUrl}#/home`;
                } 
                else if (res.data == "账户不存在") {
                    console.log(1)
                    this.$message.error("用户名或密码错误");
                    this.getCaptcha();
                }
            } catch (error) {
                // console.log(error)
                // this.$message.error("有未填写的内容");
                return false;
            }
        },
    },
    mounted() {

    }
}
</script>
  
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.block {
    height: 790px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(68, 74, 90);
}

.blockMin {
    padding-top: 4%;
    padding-right: 8%;
    background-color: rgb(113, 117, 129);
    height: 34%;
    margin-left: 8%;
    border-radius: 5%;
    /* margin-top: 30px; */
}
</style>